<template>
	<view id='user_add'>
		<view class="userType c-flex jc-between c-item-center">
			<view >
				用户类型
			</view>
			
			<view class="tabs-con c-flex c-flex-row jc-between">
				<view class="tab-item" v-for="(item,index) in tabsArr" :key="index" 
				    :class="{'selected':item.selected}">	
					{{item.label}}
				</view>
			</view>
		</view>
		<view class="d_input">
			<view class="d_input_item  c-flex c-item-center jc-between">
				<view class="personnel_num">客户名称</view>
				<view class="my_input c-flex  c-item-center">
					<input placeholder="请输入客户名称" type="text" disabled="" placeholder-class='placeholderClass'
						:maxlength="15"
						v-model="fromObj.name" />
					
				</view>

			</view>
			<view class="bottom_border"></view>
			<view class="d_input_item  c-flex c-item-center jc-between">
				<view class="personnel_num">联系电话</view>
				<view class="my_input c-flex  c-item-center">
					<input placeholder="请输入联系电话" type="number"  disabled="" :maxlength="11" placeholder-class='placeholderClass'
						 v-model="fromObj.phone" />
					
				</view>
			
			</view>
			<view class="bottom_border"></view>
			<view class="d_input_item  c-flex c-item-center jc-between">
				<view class="personnel_num">身份证号</view>
				<view class="my_input c-flex  c-item-center">
					<input type="text" disabled="" :maxlength="18" placeholder-class='placeholderClass'
						 v-model="fromObj.idCard" />
					
				</view>

			</view>
			<view class="bottom_border"></view>
			<view class="d_input_item  c-flex c-item-center jc-between">
				<view class="personnel_num">所属地区</view>
				<view class="my_input c-flex  c-item-center"  @tap="chooseVillagerHandlder()">
					<input placeholder="请选择所属小区" type="text" disabled="" placeholder-class='placeholderClass'
						v-model="area" />
					<!-- <image src="@/static/images/index/right-icon.png"></image> -->
				</view>
			
			</view>
			<view class="bottom_border"></view>
			<view class="d_input_item  c-flex c-item-center jc-between">
				<view class="personnel_num">详细地址</view>
				<view class="my_input c-flex  c-item-center" >
					<input disabled="" type="text"  placeholder-class='placeholderClass'
						v-model="fromObj.address" />
					
				</view>

			</view>
			
		</view>
		<view class="phone_panel"   v-if='type!==0'>
			<view class="title">营业执照</view>
			<view class="c-flex jc-between">
				
				<view class="view_phone" style="height: 205rpx;">
					
					<image :src="licensePic" @tap.stop='previewFile()'></image>
				</view>
			</view>
			
		</view>
		<view class="p-list" v-if="userStatusItem.auditStatus!==0" style="margin-top: 30rpx;">
			<view class="p-l-item">
				<view class="title-con c-flex jc-between c-item-center">
					审核记录
					
				</view>
				
				<view class="p-content">
					
					<view class="p-c-item c-flex jc-between" >
						<text>审核时间：</text> <text>{{userStatusItem.auditTime || '--'}}</text>
					</view>
					<view class="p-c-item c-flex jc-between" >
						<text>审核人：</text> <text>{{userStatusItem.auditUser || '--'}}</text>
					</view>
					<view class="p-c-item c-flex jc-between" >
						<text>审核意见：</text> <text>{{userStatusItem.auditReason || '--'}}</text>
					</view>
					
					
				</view>
			</view>
		</view>
		<view class="submit_btn">
			<view class="submit"  v-if='auditStatus===0'  @tap="submit()">审核</view>
			
		</view>
	</view>
</template>

<script>
	
	import {
		toast,
		checkPositiveIntegers,
		validateCreditCode,
		isValidIdNumber,
		isValidPhone
	} from '@/utils/utils.js';
	export default {
		components: {
			
		},
		data() {
			
			return {
				remoteImgUserUrl: this.$API.IMG_URL + '/liquefied-mall/common/',
				tabBarItem:null,
				tabsArr:[{label:'民用',value:0},{label:'商业',value:1},{label:'工业',value:2}],
				remoteImgUrl: this.$API.IMG_URL + '/tower-install/',
				indicatorStyle: `height: 50px;line-height:50px;`,
				fromObj: {
					id:'',
					villageId: '',
					address: '',
					name: null,
					phone: null,
					type: '',
					idCard: ''
				},
				area:'',
				streetName:'',
				latitude:'',
				longitude:'',
				townList:[],
				editType:'',
				townIndex:'',
				userType:'energy-admin',
				auditStatus:null,
				id:null,
				licensePic:'',
				type:'',
				userStatusItem:null
				
			};
		},
		onLoad(params) {
			
			
			uni.setNavigationBarColor({
				backgroundColor:'#fff',
				frontColor: '#000000'
			});
			
			this.tabsArr.forEach(item=>{
				item['selected'] = false;
			});
			
			
				const data = JSON.parse(params.item);
				this.userStatusItem = data;
				this.fromObj.id = data.id;
				this.fromObj.name = data.name;
				this.fromObj.phone = data.phone;
				this.fromObj.idCard = data.idCard;
				this.streetName =  data.street;
				this.area = data.street+'/'+data.villageName;
				this.fromObj.address  =data.address;
				this.fromObj.villageId = data.villageId;
				this.tabBarItem = this.tabsArr[data.type]
				this.auditStatus = data.auditStatus;
				this.id = data.id;
				this.licensePic = data.licensePic;
				this.type = data.type;
				console.log(this.licensePic)
			this.tabBarItem.selected = true;
			this.fromObj.type = this.tabBarItem.value;
			
		},
		
		methods: {
			previewFile() {
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: [this.licensePic], //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					loop: true,
					indicator: 'default'
				});
			},
			submit(){
				
					uni.navigateTo({
						url:'./check?id='+this.id
					})
				
			}
			
			

				
			
		}
	}
</script>
<style>
	.uni-button-color {
		color:#E86748 !important;
	}

	page {
		height: 100%;
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	

	#user_add {
		padding: 14rpx 32rpx 32rpx 32rpx;
		.p-list{
			.p-l-item{
				background: #FFFFFF;border-radius: 18rpx;padding: 15rpx 28rpx 20rpx;margin-bottom:20rpx;position:relative;
				.p-content {
					margin: 25rpx 0 10rpx;
				
					.p-c-item {
						font-family: PingFang-SC, PingFang-SC;font-weight: 500;font-size: 26rpx;margin-bottom: 24rpx;
						text:first-child{
							
							color: #8B959F;
						}
						text:last-child{
							color: #333333;
							width: 510rpx;
						}
		
					}	
				}
				.checkImg{
					width: 196rpx;
					height: 150rpx;
					position: absolute;
					top:35rpx;
					right: 10rpx;
				}
				.c_title {
					font-family: PingFangSC-Semibold, PingFang SC;
					padding: 15rpx 0 14rpx 0rpx;
					position: relative;
					.c-pos-r{
						position: absolute;
						right: 10rpx;
						top: 40rpx;
						.checkStatus{
							width:50rpx;height: 50rpx;
							
						}
						
					}
					
					.circle_first_char{
						
						line-height: 92rpx;text-align: center;width: 92rpx;height: 92rpx;background: rgba(232,103,72,0.07);border-radius: 46rpx;border: 2rpx solid #E86748;font-family: PingFangSC, PingFang SC;font-weight: 600;font-size: 40rpx;color: #E86748;
										
						image {
							width: 68rpx;
							height: 68rpx;
						}
					}
				
				
					.c_title_type {
						padding-left: 24rpx;
						padding-top: 10rpx;
				
						.name {
							font-family: PingFang-SC, PingFang-SC;font-weight: 800;font-size: 30rpx;color: #333333;
						}
				
						.time {
							margin-top: 8rpx;font-family: PingFang-SC, PingFang-SC;font-weight: 400;font-size: 26rpx;color: #8B959F;
						}
					}
				}
				
			}
		}
		.auditStatusIng{
			margin-top: 300rpx;
			image{
				width: 216rpx;
				height: 206rpx;
			}
			view{
				margin-top: 40rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #999999;
			}
		}
		.userType{
			background: #FFFFFF;
			border-radius: 25rpx;
			padding: 30rpx;
			position: relative;
			top: 20rpx;
			
		}
		.tabs-con{
			width:65%;
			.tab-item{
				background: #FFFFFF;
				border-radius: 27rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #3E3E3E;
				padding: 10rpx 28rpx;
				position: relative;
				
				
			}
			.selected{
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);
				border-radius: 27rpx;
			}
		}
		.submit_btn {

			position: fixed;
			bottom: 50rpx;
			left: 50%;
			transform: translate(-50%,-50%);
			view{
				margin: 0 auto;
				width: 710rpx;
				height: 84rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				
				line-height: 84rpx;
				text-align: center;
				border-radius: 16rpx;
			}
			.submit {
				background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);
				color: #FFFFFF;
			}
			.delete{
				margin-top: 25rpx;
				color: #E86748;
				border: 2rpx solid #E96949;
				
			}
		}

		
		

		.d_input {
			background: #FFFFFF;
			border-radius: 20rpx;
			//font-size: 28rpx;

			margin: 40rpx auto 0;

			.d_input_item {

				width: 686rpx;
				height: 100rpx;
				margin: 0 26rpx 0 30rpx;

				image {
					width: 20px;
					height: 20px;
					right: 29px;
					position: absolute;
				}

				.my_input {
					
					width: 500rpx;
				}
			}

			.personnel_num {
				width: 500rpx;
				padding-left: 0rpx;
				font-size: 28rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 400;
				color: #000;
			}



			input {

				border: 0;
				padding: 0;
				outline: none;
				text-align: right;
				padding-right: 60rpx;
				font-size: 28rpx;
				padding-right: 90rpx;width: 500rpx;
				
			}

			/deep/.placeholderClass {
				font-size: 14px;
				
			}
		}

		.bottom_border {
			width: 622rpx;
			height: 2rpx;
			margin: 0 auto;
			background-color: #F7F7F7;
		}
		.phone_panel {
			//margin-top: 32rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			gap: 42rpx;
			padding: 26rpx 20rpx;
			    margin: 40rpx 0;
				.title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 26rpx;
				}
			.view_phone {
				width: 310rpx;
				height: 200rpx;
				border-radius: 10rpx;
				position: relative;
		
				//margin:48rpx 34rpx;
				image {
		
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
		
				
			}
		
			
		}
	}
</style>